import React from 'react';
import moment from 'moment';
import { Form, Row, Col, Select, Input, DatePicker, AutoComplete } from 'antd';
import { BG_CONTACT_WAY, BG_RELATE_TYPE } from '@/pages/Recruitment/dictionary';
import Pre from '@/components/Pre';

import { InlineInputWrap } from '../../components';
import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;

// const getDictName = (value, dict) => dict.find(item => item.value === vavlue)?.text;

const relateListOrigin = BG_RELATE_TYPE.map(item => item.text);

const editLayout = { wrapperCol: { span: 24 } };
const viewLayout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 14 }
};

const ContactItem = React.memo(({ form, isEdit, renderItem, id, workCompanyList = [], detail = {} }) => {
    const { getFieldDecorator } = form;

    // 混乱的UI设计
    const formItemLayout = isEdit ? editLayout : viewLayout;

    const [companyList, setCompanyList] = React.useState(workCompanyList.filter(item => item));
    const handleSearch = searchText => {
        setCompanyList(workCompanyList.filter(item => !searchText || item.includes(searchText)));
    };

    const [relateList, setRelateList] = React.useState(relateListOrigin);
    const handleRelateSearch = searchText => {
        setRelateList(relateListOrigin.filter(item => !searchText || item.includes(searchText)));
    };

    const contactWayValue =
        form.getFieldValue(`recruitTalentBackgrounds[${id}].objectContactType`) ??
        detail.objectContactType ??
        BG_CONTACT_WAY[0].value;

    const currentContactWay = BG_CONTACT_WAY.find(item => item.value === contactWayValue)?.text;

    return (
        <>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="背调公司" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].organizationName`, {
                                initialValue: detail.organizationName,
                                rules: [
                                    {
                                        required: true,
                                        message: '背调公司不能为空'
                                    }
                                ]
                            })(
                                <AutoComplete
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    placeholder="请选择或输入背调公司"
                                    dataSource={companyList}
                                    onSearch={handleSearch}
                                />
                            ),
                            detail.organizationName,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="联系人姓名" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].objectName`, {
                                initialValue: detail.objectName,
                                rules: [
                                    {
                                        required: true,
                                        message: '联系人姓名不能为空'
                                    }
                                ]
                            })(<Input placeholder="请输入联系人姓名" />),
                            detail.objectName,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="与你的关系" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].relateType`, {
                                initialValue: detail.relateType,
                                rules: [
                                    {
                                        required: true,
                                        message: '与你的关系不能为空'
                                    }
                                ]
                            })(
                                <AutoComplete
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    placeholder="请选择或输入与你的关系"
                                    dataSource={relateList}
                                    onSearch={handleRelateSearch}
                                />
                            ),
                            detail.relateType,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="联系方式" required={isEdit} {...formItemLayout}>
                        <InlineInputWrap>
                            <Form.Item style={{ flex: 1, marginRight: 16 }}>
                                {renderItem(
                                    getFieldDecorator(`recruitTalentBackgrounds[${id}].objectContactType`, {
                                        initialValue: detail.contactWay || BG_CONTACT_WAY[0].value,
                                        rules: [
                                            {
                                                required: true,
                                                message: '请选择联系方式的类型'
                                            }
                                        ]
                                    })(
                                        <Select
                                            style={{ width: '100%' }}
                                            placeholder="请选择联系方式的类型"
                                            getPopupContainer={triggerNode => triggerNode.parentElement}
                                        >
                                            {BG_CONTACT_WAY.map(item => (
                                                <Option key={item.value} value={item.value}>
                                                    {item.text}
                                                </Option>
                                            ))}
                                        </Select>
                                    ),
                                    `${currentContactWay || ''}-${detail.objectContactInfo || ''}`,
                                    isEdit
                                )}
                            </Form.Item>
                            {isEdit && (
                                <Form.Item style={{ flex: 1 }}>
                                    {getFieldDecorator(`recruitTalentBackgrounds[${id}].objectContactInfo`, {
                                        initialValue: detail.objectContactInfo,
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入联系方式'
                                            }
                                        ]
                                    })(
                                        <Input
                                            style={{ width: '100%' }}
                                            placeholder={`请输入${currentContactWay}`}
                                            allowClear
                                            maxLength={50}
                                        />
                                    )}
                                </Form.Item>
                            )}
                        </InlineInputWrap>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="建议背调时间" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].backgroundTime`, {
                                initialValue: moment(detail.backgroundTime),
                                rules: [
                                    {
                                        required: true,
                                        message: '背调时间不能为空'
                                    }
                                ]
                            })(
                                <DatePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    placeholder="请选择背调时间"
                                    style={{ width: '100%' }}
                                />
                            ),
                            detail.backgroundTime,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={24}>
                    <Form.Item
                        label="背调对象介绍"
                        {...(isEdit ? formItemLayout : { labelCol: { span: 4 }, wrapperCol: { span: 18 } })}
                        {...(isEdit ? { extra: '不超过1000个字符' } : {})}
                        {...(isEdit ? {} : { className: styles.fixLabel })}
                    >
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].objectRemark`, {
                                initialValue: detail.objectRemark
                            })(<TextArea maxLength={1000} placeholder="请输入背调对象介绍" style={{ height: 100 }} />),
                            <Pre>{detail.objectRemark}</Pre>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </>
    );
});

export default ContactItem;
